<template>
  <div>
    <div class="box-ul">
      <ul>
        <li v-model="one" :class="sex === one ?'active':''" @click="click(one)">男</li>
        <li v-model="tow" :class="sex === tow ?'active':''" @click="click(tow)">女</li>
        <li v-model="three" :class="sex === three ?'active':''" @click="click(three)">保密</li>
      </ul>
    </div>
    <div class="bottom">
      <div class="box">
        <p class="btn" @click="storage">保存</p>
      </div>
    </div>
  </div>
</template>

<script>
import {getInfo, user} from "@/utils/api";
import {Toast} from "vant";
export default {
  name: "set-info-sex",
  data(){
    return{
      sex: parseInt(this.$route.query.sex),
      one:0,
      tow:1,
      three:3,
      avatar:''
    }
  },
  created() {
    console.log(this.sex)
    getInfo().then(res=> {
      this.avatar = res.data.avatar
    })
  },
  methods:{
    click(i){
      this.sex = i
      // console.log(i)
      // console.log(this.sex)
    },
    storage(){//修改用户性别
      user({sex: this.sex,avatar:this.avatar}).then(res=>{
        // console.log(res)
        if(res.code === 200){
          this.$router.go(-1)
        }else {
          Toast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box-ul{
  background-color: #fff;
  ul {
    padding: 5px 15px;
    li {
      width: 100%;
      height: 55px;
      line-height: 55px;
      font-size: 14px;
      background-color: #fff;
      border-bottom: 1px solid #efefef;
      &:last-child{
        border-bottom: none;
      }
    }
    .active{
      background: url() no-repeat 100%;
      background-size: 4vw 4vw;
    }
  }
}


.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  //overflow: hidden;
  //box-sizing: border-box;
  background-color: white;
  .box {
    margin: 6.5px 15.5px;
    height: 100%;
    .btn {
      width: 100%;
      height: 37px;
      background: #e60012;
      border-radius: 37px;
      text-align: center;
      line-height: 39px;
      color: #fff;
      font-size: 13px;
      font-weight: bold;
    }
  }
}
</style>